Le Box Model CSS

Chaque élément HTML est une boîte composée de 4 zones :

┌───────────────────────────────┐
│         MARGIN (extérieur)    │
│  ┌─────────────────────────┐  │
│  │     BORDER (bordure)    │  │
│  │  ┌───────────────────┐  │  │
│  │  │ PADDING (intérieur)│  │  │
│  │  │  ┌─────────────┐   │  │  │
│  │  │  │   CONTENT   │   │  │  │
│  │  │  └─────────────┘   │  │  │
│  │  └───────────────────┘  │  │
│  └─────────────────────────┘  │
└───────────────────────────────┘

Les 4 zones

div { width: 200px; padding: 20px; border: 5px solid black; margin: 10px; }
/* Largeur totale par défaut = 200 + 40 + 10 = 250px */

Content

div {
    width: 300px;
    min-width: 200px;   /* mini */
    max-width: 500px;   /* maxi */
}

• Bloc (<div>, <p>) : 100 % du parent par défaut
• Inline (<span>, <a>) : largeur = contenu

min-width / max-width : essentiels pour le responsive

Padding — espacement intérieur

padding: 15px;                 /* tous côtés */
padding: 10px 20px;            /* vertical | horizontal */
padding: 10px 20px 15px 25px;  /* haut | droite | bas | gauche */

Astuce : Top, Right, Bottom, Left (sens horaire)

Border — bordure

border: 2px solid #333;   /* width style color */

border-style: solid | dashed | dotted | double;

border-radius: 10px;
border-radius: 50%;   /* cercle parfait */

Margin — espacement extérieur

margin: 20px;
margin: 0 auto;       /* centrage horizontal */
margin-top: -10px;    /* rapprochement (avancé) */

• auto : centre un bloc de largeur définie
• Valeurs négatives : superposer / rapprocher

Fusion des marges verticales

<p style="margin-bottom: 30px;">Paragraphe 1</p>
<p style="margin-top: 20px;">Paragraphe 2</p>

Espace entre les deux = 30px (la plus grande), pas 50px.

Uniquement vertical — les marges horizontales ne fusionnent jamais.

box-sizing: border-box

Le problème : par défaut width ne compte ni padding ni border.

* { box-sizing: border-box; }

div {
    width: 200px;          /* largeur totale = 200px */
    padding: 20px;
    border: 5px solid black;
}

À mettre au début de tous vos projets CSS.

Visualiser le Box Model

DevTools (F12) → Éléments → Computed

Zones colorées :

• Margin · Border · Padding · Content

Utilisez toujours les DevTools pour déboguer.